<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/chuanYue.css">
</head>

<body>
    <!-- 头部 -->
    <footer>
        <div class="picture">
            <img src="img/1/1.1.png" alt="">
        </div>

        <ul class="list">
            <li>网站首页</li>
            <li>传悦资源</li>
            <li class="color">传悦案例</li>
            <li>传悦服务</li>
            <li>解决方案</li>
            <li>需求提交</li>
        </ul>
        <div class="concat">
            <img src="img/1/1.2.png" alt="">
        </div>
    </footer>
    <!-- 大图 -->
    <div class="bigPicture">
        <img src="img/1/2.png" alt="">
        <p class="font">
            <span class="font-title">网站首页</span>&gt;<span>传悦案例</span>
        </p>
    </div>
    <!-- 内容 -->
    <div class="content">
        <h2 class="content-list">
            <ul class="total">
                <li class="back">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
        </h2>
        <div class="box">
            <a href="" id="template">
                <dl>
                    <dt>
                    <img src="" alt="" class="potato">
                </dt>
                    <dd>
                        <h4 class="title"></h4>
                        <p class="text"></p>
                    </dd>
                </dl>
            </a>
        </div>
        <ul class="count">
            <li>&lt;</li>
            <li>1</li>
            <li class="color">2</li>
            <li>3</li>
            <li>4</li>
            <li>&gt;</li>
        </ul>

    </div>
    <!-- 底部 -->
    <div class="bottom">
        <img src="img/1/4.1.png" alt="">
    </div>


    <script src="jquery.min.js"></script>
    <script>
        let http = new XMLHttpRequest();
        http.open("GET", "http://127.0.0.1:83/getList");
        http.send()
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText);
                console.log(data)
                let tem = $("#template")
                data.forEach((item, index) => {
                    let newItem = tem.clone();
                    newItem.attr("id", "")
                    newItem.attr("href", `chuanyueDetail.html?id=${item.id}`)
                    $(".box").append(newItem);
                    $(".potato").eq(index).attr("src", item.image);
                    $(".title").eq(index).html(item.heading);
                    $(".text").eq(index).html(item.label)
                })
            }
        }
    </script>

</body>

</html>